<template>
	<view>
		<liuyuno-tabs :tabNavBars="tabNavBars" :activeIndex="activeIndex" navColor="#FF4891"
			@changeAct="changeOrderNavAct" class="tabs">
		</liuyuno-tabs>
		<view style="background-color:#F7F8F9 ;">
			<view class="section-3" v-for="(item,index) in tabNavBars.list ||list" :key="index">
				<view class="content3" @click="navorderinfo(item.order_no)">
					<view class="content3_title">
						<view>订单编号：{{item.order_no}}</view>
						<view style="color:#FF4891 ;"> 待付款</view>
					</view>
					<view class="content3_pro">
						<!-- <image :src="item.icon" class="content3_pro_image"></image> -->
						<image src="../../../static/Mine/6.png" class="content3_pro_image"></image>
						<view class="content3_center">
							<view class="content3_center_name">韩式系列你笑起来真好看 艾莎玫瑰</view>
							<view class="content3_center_spec">经典 99 枝；多头</view>
						</view>
						<view class="content3_price">
							<view>￥319.00</view>
							<!-- <view>￥{{item.price}}</view> -->
							<view style="margin-top: 95rpx;">x1</view>
							<!-- <view style="margin-top: 95rpx;">x{{item.num}}</view> -->
						</view>
					</view>
					<view class="section-3-total">共{{item.total_num}}件，实付<text>￥{{item.total_price}}</text></view>
					<view class="section-3-bottom">
							<view>支付时间仅剩:39分31秒</view>
							<!-- <view>支付时间仅剩:{{item.countDown}}</view> -->
						<view @click="orderlistck" class="order_btn" style="background-color: #F0F1F6; color: #000000;">
							取消订单</view>
						<view @click="orderlistck" class="order_btn" style="color: #FFF ;">确认收货</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import liuyunoTabs from "../orderList/components/liuyuno-tabs/liuyuno-tabs.vue";
	import {
		orderlist
	} from '../../../api/mine.js'
	export default {
		components: {
			liuyunoTabs
		},
		data() {
			return {
				total: '45.00',
				activeIndex: 0,
				list:[],
				tabNavBars: [{
						name: '全部',
						// noOrderImg: 'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1875885761,2373220900&fm=26&gp=0.jpg',
						noOrderTips: '您还没有待付款订单哦~',
						list: [], //该订单状态下数据。
						// num:'9'
					},
					{
						name: '待付款',
						// noOrderImg: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1717329225,2115039553&fm=26&gp=0.jpg',
						noOrderTips: '您还没有待发货订单哦~',
						list: [],
						// num:'10'
					},
					{
						name: '待发货',
						// noOrderImg: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1717329225,2115039553&fm=26&gp=0.jpg',
						noOrderTips: '您还没有待收货订单哦~',
						list: [],
						// num:'10'
					},
					{
						name: '待收货',
						// noOrderImg: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1148236422,1147879121&fm=26&gp=0.jpg',
						noOrderTips: '您还没有待评价订单哦~',
						list: ['待收货订单列表'],
						// num:'15'
					},
					{
						name: '己收货',
						// noOrderImg: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1504800501,1844087668&fm=26&gp=0.jpg',
						noOrderTips: '您还没有订单哦~',
						list: [],
						// num:'20'
					}
				],
				pro: [{
					name: '猕猴桃',
					price: '15.00',
					num: 1,
					icon: '../../../static/Mine/5.png'
				}, ],
				expirationTime: ''
			}
		},
		onLoad() {
			this.getorderlist()
		},
		methods: {
			// 查看详情
			navorderinfo(id) {
				uni.navigateTo({
					url: '../orderInfo/orderInfo3?orderno=' + id
				})
			},
			getorderlist() {
				orderlist().then(res => {
					if (res.status == 200) {
						console.log(res)
						this.tabNavBars.list = res.data.data
						this.list=res.data.data
						console.log('this.tabNavBars.list', this.tabNavBars.list)
						var result=30000000;
						let len=this.tabNavBars.list.length
						console.log('len',len)
						for (var i = 0; i < len; i++){
							let expirationTime=this.tabNavBars.list.create_time
						}
						
					}
				})
			},

			changeOrderNavAct(index) {
				// console.log(index);
				// 改变导航的激活样式根据索引下标
				this.activeIndex = index;
			},
			orderlistck() {
				uni.navigateTo({
					url: "/pages/Mine/orderInfo/orderInfo2",
					fail(fail) {
						console.log(fail)
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.tabs {
		background-color: #fff;
		font-size: 38rpx;
		font-weight: 500;
	}

	page {
		background-color: #F5F5F5;
        font-family: PingFangSC-Medium;
	}

	.section-3 {
		position: relative;
		background-color: #FFF;
		border-radius: 12rpx;
		padding: 10rpx;
		margin: 20rpx;
		box-shadow: 0 20rpx 20rpx -20rpx rgba($color: #171E3A, $alpha: 0.1);

		.content3 {
			padding: 10rpx;
			.content3_title {
				border-bottom: 1rpx solid #F0F0F0;
				align-items: center;
				vertical-align: middle;
				padding-bottom: 15rpx;
				display: flex;
				justify-content: space-between;
				font-weight: 600;
				margin: 10rpx 0;
			}

			.content3_pro {
				width: 100%;
				padding: 20rpx 0;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				margin-top: 10rpx ;
				.content3_pro_image {
					width: 180rpx;
					height: 180rpx;
					display: block;
					flex-shrink: 0;
					border-radius: 20rpx;
				}

				.content3_center {
					flex: 1;
					padding: 20rpx 8rpx;
					box-sizing: border-box;
					margin-left: 20rpx;

					.content3_center_name {
						max-width: 310rpx;
						word-break: break-all;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						font-size: 28rpx;
						font-weight: 600;
						line-height: 32rpx;
					}

					.content3_center_spec {
						font-size: 24rpx;
						font-weight: 400;
						color: #9A9EA9;
						line-height: 32rpx;
						padding-top: 20rpx;
						word-break: break-all;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						margin-top: 40rpx;
					}
				}

				.content3_price {
					text-align: right;
					font-size: 28rpx;
					font-weight: 600;
					color: #171E3A;
					line-height: 30rpx;
					padding-top: 20rpx;
				}
			}

		}

		.section-3-total {
			border-bottom: 1rpx solid #F4F4F4;
			text-align: right;
			height: 60rpx;
			line-height: 60rpx;
			font-weight: 600;
			font-size: 24rpx;
			padding-bottom: 10rpx;
			text {
				font-size: 32rpx;
				color: #FF4891;
				font-weight: 800;
			}
		}

		.section-3-bottom {
			margin: 20rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-weight: 600;
			font-size: 24rpx;
			height: 60rpx;
			line-height: 60rpx;

			.order_btn {
				margin-top: 10rpx;
				width: 160rpx;
				height: 60rpx;
				background-color: #FF4891;
				display: block;
				float: right;
				border-radius: 50rpx;
				align-items: center;
				color: #fff;
				text-align: center;
				line-height: 60rpx;
				font-size: 26rpx;
				font-family: PingFangSC-Medium, PingFang SC;
			}
		}
	}
</style>
